<template>
    <ScaleBox>
        <div class="home">
            <dv-border-box-11 title="（图表+大屏）示例" style="padding: 20px 0">
                <el-row class="my-row">
                    <el-col :span="3" v-for="item in dataList" :key="item.id">
                        <el-card class="card">
                            <img :src="item.url" class="image" :alt="item.title">
                            <div style="padding: 10px;">
                                <router-link :to="{path:item.pageUrl}" target="_blank">
                                    <el-button :type="item.type" round>{{ item.title }}</el-button>
                                </router-link>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </dv-border-box-11>
        </div>
    </ScaleBox>
</template>

<script>

import ScaleBox from "@/components/scaleBox/SacleBox.vue";

export default {
    name: 'HomeView',
    components: {ScaleBox},
    data() {
        return {
            dataList: [
                {
                    id: "000",
                    url: 'https://www.rrppt.com/uploads/sucai/32988/img/litpic.jpg',
                    title: '柱状图',
                    type: '',
                    pageUrl:'/dataView/barGraph'
                },
                {
                    id: "001",
                    url: 'https://pic4.zhimg.com/v2-b54bc9f18d28a1dbd5befd5f68ca8555_r.jpg',
                    title: '折线图',
                    type: 'primary',
                    pageUrl:'/dataView/brokenLine'
                },
                {
                    id: "002",
                    url: 'https://pic.mairuan.com/WebSource/coreldraw/news/old/uploads/images/support2/shanxing-tongjitu-7.png',
                    title: '扇形图',
                    type: 'success',
                    pageUrl:'/dataView/pieChart'
                },
                {
                    id: "003",
                    url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.P_FLNXjcCEG3hkSWHbyhkAHaFj?rs=1&pid=ImgDetMain',
                    title: '散点图',
                    type: 'info',
                    pageUrl:'/dataView/scatterDiagram'
                },
                {
                    id: "004",
                    url: 'https://img.ixintu.com/upload/jpg/20210524/c4148b0c384ebde5357dd2a7008d46c9_101351_800_1060.jpg!con0',
                    title: '地图',
                    type: 'success',
                    pageUrl:'/dataView/areaMap'
                },
                {
                    id: "005",
                    url: 'https://www.edrawsoft.cn/images_cms/article/edrawmax/zzt1.png',
                    title: '数据集',
                    type: 'warning',
                    pageUrl:'/dataView/dataMart'
                },
                {
                    id: "006",
                    url: 'https://img.51miz.com/Element/00/84/97/13/7577532a_E849713_17f7b41b.png',
                    title: '进度条',
                    type: 'warning',
                    pageUrl:'/dataView/progressBar'
                },
                {
                    id: "007",
                    url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.P_FLNXjcCEG3hkSWHbyhkAHaFj?rs=1&pid=ImgDetMain',
                    title: '散点图+d3',
                    type: 'info',
                    pageUrl:'/dataView/scatterDiagram2'
                },
                {
                    id: "100",
                    url: 'https://img95.699pic.com/desgin_photo/40193/4122_list.jpg',
                    title: '大屏',
                    type: 'danger',
                    pageUrl:'/dataView/largeScreen'
                },
                {
                    id: "101",
                    url: 'https://img95.699pic.com/desgin_photo/40193/4122_list.jpg',
                    title: '大屏-松江测试',
                    type: 'danger',
                    pageUrl:'/dataView/myLargeScreen'
                },
                {
                    id: "102",
                    url: 'https://th.bing.com/th/id/OIP.Gz85P02_vDRmcYnl5q0LlAHaEN?rs=1&pid=ImgDetMain',
                    title: 'p-queue队列',
                    type: 'success',
                    pageUrl:'/queue/myPQueue'
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.my-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;

    .card {
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 15px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;

        .image {
            height: 100px;
            display: block;
        }
    }

    .card:hover{
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        transform: scale(1.02);
    }

}
.my-row > * {
    min-width: 310px; /* 设置一个合适的最小宽度，可以根据需要调整 */
}

</style>
